<template>
  <!-- 历史工作记录 -->
  <div class="form-history">
        <div v-for="(item, index) in historyList" :key="index">
          <template>
            <span style="font-size: 14px;font-weight: 600;color: #1D1D1D;">服务人员：{{item.workname}}</span>
          </template>
          <template>
            <Row>
              <i-col span="8">
                <span>工作日期：{{item.updateTime ? item.updateTime.substr(0,10) : ''}}</span>
              </i-col>
              <i-col span="8">
                <span>工作方式：{{item.worktype}}网络联系业务员</span>
              </i-col>
              <i-col span="8">
                <span>交费期次：{{item.payyear}}/{{item.payyears}}年交</span>
              </i-col>
            </Row>

            <!--  -->
            <Form label-position="left" style="margin-top:5px" class="form-self">
              <div style="background: #FFF1F0;border-radius: 4px;padding:3px 10px;">
                <Row style="margin-top:0px">
                  <i-col span="8">
                    <FormItem label="客户意愿：">
                      <span>{{item.customerWish}}</span>
                    </FormItem>
                  </i-col>
                  <i-col span="16" style="margin-left: -0.2%;">
                    <FormItem label="拜访记录：">
                      <div style="margin-left: 82px;word-wrap: break-word">{{item.workresult}}</div>
                    </FormItem>
                  </i-col>
                </Row>
                <Row style="margin-top:0px">
                  <i-col span="24">
                    <FormItem label="未收原因说明：">
                      <div style="margin-left: 110px;word-wrap: break-word">
                        <span>{{item.reasonByCustomer ? item.reasonByCustomer.join('；') : ''}}</span>
                        <span v-if="item.reasonByother">：{{item.reasonByother}}</span>
                      </div>
                    </FormItem>
                  </i-col>
                </Row>

                <Row style="margin-top:0px">
                  <i-col span="8">
                    <FormItem label="保单效力中止后，是否有复效打算：">
                      <span>{{item.reinstate}}</span>
                      <span v-if="item.reinstateDate">：{{item.reinstateDate.substr(0,10) || ''}}</span>
                    </FormItem>
                  </i-col>
                  <i-col span="8" style="margin-left: -0.2%;">
                    <FormItem label="联系电话是否更新：">
                      <span>{{item.phoneUpdateFlag ? item.phoneUpdateFlag :'无'}}</span>
                    </FormItem>
                  </i-col>
                  <i-col span="8" style="margin-left: 0.2%;">
                    <FormItem label="联系地址是否更新：">
                      <div style="margin-left: 138px;word-wrap: break-word">
                        {{item.addressUpdateFlag  ? item.addressUpdateFlag  :'无'}}</div>
                    </FormItem>
                  </i-col>
                </Row>

                <Row style="margin-top:0px">
                  <i-col span="8">
                    <FormItem label="下次工作再计划：">
                      <span>{{item.nextWorkDate ? item.nextWorkDate.substr(0,10)  :'无'}}</span>
                    </FormItem>
                  </i-col>
                  <i-col span="15" style="margin-left: -0.2%;">
                    <FormItem label="计划工作方式：">
                      <span>{{item.nextWorkType ? item.nextWorkType :'无'}}</span>
                    </FormItem>
                  </i-col>
                </Row>
              </div>
              <div style="padding:3px 10px;">
                <div v-if="item.interviewworkPath && item.interviewworkPath.length>0">
                  <Row>
                    <i-col span="24">
                      <FormItem label="面访上传证明图片：" class="full-item-facecontent">
                        <span class="pic-span" v-for="(facecontent,facecontentI) in item.interviewworkPath"
                          :key="facecontentI" @click="downloadInterview(facecontent)">
                          {{facecontent.path}}{{(facecontentI < item.interviewworkPath.length-1) ? ';' :''}}
                        </span>
                      </FormItem>
                    </i-col>
                  </Row>
                </div>
                <Row v-else>
                  <i-col span="24">
                    <FormItem label="面访上传证明图片：">
                      <!-- <span>图片023.jpg ; </span> -->
                      <span>无</span>
                    </FormItem>
                  </i-col>
                </Row>

                <div v-if="item.contentText && item.contentText.length>0">
                  <Row style="margin-top:0px" v-for="(note, noteI) in item.contentText" :key="noteI">
                    <i-col span="14">
                      <FormItem label="短信通知：" class="full-item">
                        <div style="margin-left: 83px;word-wrap: break-word">
                          发送对象：{{ note.persionid }} 发送内容：{{ note.messagecontent }}
                        </div>
                      </FormItem>
                    </i-col>

                    <i-col span="7">
                      <FormItem label="发送时间：">
                        <span>{{ note.createTime }}</span>
                      </FormItem>
                    </i-col>
                  </Row>
                </div>
                <Row v-else>
                  <i-col span="14">
                    <FormItem label="短信通知：">
                      <span>无</span>
                    </FormItem>
                  </i-col>
                </Row>

                <div v-if="item.networkPath && item.networkPath.length>0">
                  <Row>
                    <i-col span="24">
                      <FormItem label="网络联系证明图片：" class="full-item-facecontent">
                        <span class="pic-span" v-for="(netcontentl,netcontentlI) in item.networkPath"
                          :key="netcontentlI" @click="downloadInterview(netcontentl)">
                          {{netcontentl.path}}{{(netcontentlI < item.networkPath.length-1) ? ';' :''}}
                        </span>
                      </FormItem>
                    </i-col>
                  </Row>
                </div>
                <Row v-else>
                  <i-col span="24">
                    <FormItem label="网络联系证明图片：">
                      <!-- <span>图片023.jpg ; </span> -->
                      <span>无</span>
                    </FormItem>
                  </i-col>
                </Row>

                <Row style="margin-top:0px">
                  <i-col span="24">
                    <FormItem label="上级点评：" class="review-form-item">
                      <div style="margin-left:80px">
                        <span v-if="!item.professionalCommentVOS || item.professionalCommentVOS.length == 0">无评价</span>
                        <div v-else v-for="( ti, index) in item.professionalCommentVOS" :key="index"
                          style="margin-bottom:10px">
						  <template v-if="ti.plancommentid==row.plancommentid">
                          <div class="border-div" style="padding:5px 10px;margin-left:0">
                            <span>{{ ti.commentname }}</span>

                            <span @mouseleave="hIndex = -1">
                              <img v-for="(i, n) in 5"
                                :src="(ti.level - 1) > -1 ? n > (ti.level - 1) ? xing : xingR : n > rIndex ? xing : xingR"
                                :key="n">
                            </span>
                            <div style="color: #2A2A2A;word-wrap: break-word">{{ ti.comment || '无评价' }}</div>
                          </div>
                          <div v-if="ti.replycomment && ti.replycomment.length">
                            <div v-for="(reply, rN) in ti.replycomment" :key="rN" style="color: #2A2A2A;">
                              专员回复：<span style="word-break: break-all">{{ reply }}</span>
                            </div>
                          </div>
						  </template>
                        </div>                          
                      </div>
                    </FormItem>
                  </i-col>
                </Row>
              </div>
            </Form>

          </template>
        </div>
  </div>
</template>

<script>
import { downloadUrl} from "../../../util/util";
export default {
  name: "historyW",
  data() {
    return {
      xingR: require("../../../../assets/image/xingR.png"),
      xing: require("../../../../assets/image/xing.png"),
      rIndex: -1,
      hIndex: -1,
      value: "",
      modalHistery: false,
      modalInfo: true,
      historyList: [],
	  row:{},
    };
  },
  mounted() {
  },
  methods: {
	downloadInterview(item) {
      downloadUrl(item.photoUrl, item.path);
    },
    getHistoryList(row) {
		this.row=row
      this.api.selectworkdetail({
          paytodate: row.paytodate,
          planid: row.plainid,
          contno:row.contno
        })
        .then((res) => {
          if (res.code == 200) {
            // this.historyList = res.data
			res.data.map(item=>{
				if(item.workid==row.workid){					
					this.historyList =[item]
				}
			})
            console.log(this.historyList);
          } else this.$Message.info(res.msg);
        });
    },
  },
};
</script>
<style scoped>
.title {
  text-align: center;
  font-size: 18px;
  font-family: PingFangSC-Semibold, PingFang SC;
  font-weight: 600;
  color: #101010;
  line-height: 18px;
}

.form-self>>>.ivu-form-item {
  margin-bottom: 0 !important;
}

.border-div {
  border: 1px solid #eeeeee;
}

.pic-span {
  color: #ff4722;
  border-bottom: 1px solid #ff4722;
  margin-right: 10px;
}
</style>